<template>
  <div class="box">
    <my-logo-header v-once></my-logo-header>
    <main class="content">
      <div class="section">
        <i class="iconfont icon-diannao"></i>
      </div>
      <p class="first-p">您的上网剩余时长如下</p>
      <p class="success-color">{{user.expiration_time}}</p>
    </main>
    <div class="place">
      <div class="place-header">所属场所</div>
      <div class="item">
        <div class="f-left icon-box">
          <i class="iconfont" :class="className"></i>
        </div>
        <div class="f-left">
          <p><span>{{user.place_name}}</span></p>
        </div>
      </div>
    </div>
    <bottom v-once></bottom>
  </div>
</template>

<script>
  import util from '../utils/Util.js'
  import LogoHeader from '../components/LogoHeader.vue';

  export default {
    name: "user",
    created() {
      this.user = JSON.parse(localStorage.getItem('user'));
      this.className = util.getClassName(this.user.procreatorId)
    },
    components: {
      'my-logo-header': LogoHeader
    },


    data: function () {
      return {
        user: {},
        className: ''
      }
    },
    methods: {}
  }
</script>

<style scoped>
  @import '../assets/iconfont/iconfont.css';

  .box {
    background-color: #f9f9f9;
    overflow: hidden;
    height: 100%;
  }

  .content {
    text-align: center;
    font-size: 0.13rem;
    background-color: #ffffff;
    padding-bottom: 0.25rem;
  }

  .content .iconfont {
    font-size: 0.65rem;
    color: #d9d9d9;
  }

  .content > div {
    padding-top: 0.3rem;
  }

  .content .first-p {
    margin: 0.1rem;
  }

  .content p:last-child {
    font-size: 0.16rem;
  }

  .place {
    border-top: 1px solid #e9e9e9;
    padding: 0 0.17rem;
  }

  .place-header {
    font-size: 0.13rem;
    color: #252c35;
    line-height: 0.5rem;
  }
  .icon-box {
    text-align: center;
  }
  .icon-box .iconfont {
    font-size: 0.24rem;
  }

  .item {
    border: 1px dashed #dadada;
    overflow: hidden;
    height: 0.7rem;
    line-height: 0.7rem;
    padding-left: 0.2rem;
  }

  .item > div:first-child {
    margin-top: 0.15rem;
    margin-right: 0.16rem;
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    border-radius: 50%;
    background-color: #dcdcdc;
    overflow: hidden;
  }

  .item > div:last-child span:first-child {
    font-size: 0.14rem;
  }

  .item > div:last-child span:last-child {
    font-size: 0.1rem;
  }
</style>
